
depth_sell = [
]
// 8 个
depth_buy = [
]

var dict = {}

var trade_data = {

    type1 : "buy",
    show_button_title : "买入",

    last_price : 0.00,
    depth_sell : depth_sell,
    depth_buy : depth_buy,

    up_coin_type : '',
    up_use_coin_type : '',

    coin_type : '',
    use_coin_type : '',

    show_balance : "",      // 可用余额
    show_coin_type : "",    // 可用余额后面类型

    show_can_total_amount : "",      // 可买或者可卖总额
    show_can_total_title : "",       // 可买或者可卖
    show_can_total_coin_type : "",   // 可


    input_price : "",
    input_count : "",

    percent_color : '',
    percent_color2 : '',
    percent_color3 : '',
    percent_color4 : '',
}
function change_depth_sell (list) {
    trade_data.depth_sell = list
}
function change_depth_buy (list) {
    trade_data.depth_buy = list
}
function change_last_price (price) {
    trade_data.last_price = price
}
// trade template
trade_template= '<div>' +
'   <div class="content page-trade"  style="padding-bottom:2.5rem;overflow-x: hidden;">' +
'       <div class="trade-box">' +
'           <div class="depths">' +
'               <div class="priceCol">' +
'                   <div class="lastPrice magenta">' +
'                       <span v-on:click=change_price(last_price)>最新 {{ last_price }}</span>' +
'                   </div>' +
'                   <div class="fontKline">' +
'                       <a href="/m/trade.html#/market"><i class="font font-kxian"></i></a>' +
'                   </div>' +
'               </div>' +
'              <table class="buyin" border="0" cellspacing="0" cellpadding="0">' +
'                   <colgroup style="width: 50%"></colgroup>' +
'                   <colgroup style="width: 50%"></colgroup>' +
'                   <tbody>' +
'                   <tr>' +
'                       <th class="f-left">价格</th>' +
'                       <th class="f-right">数量</th> ' +
'                 </tr>' +
'               <tr v-for="info in depth_sell" v-on:click=change_price(info.price)>' +
'                   <td class="f-left magenta">' +
'                       <span class="gray">{{info.price}}</span>' +
'                   </td>' +
'                   <td class="f-right">' +
'                       <span>{{info.count}}</span>' +
'                       <div class="zhuzhuang" :style="info.bg_length"></div>' +
'                   </td>' +
'               </tr>' +
'                   </tbody>' +
'               </table>' +
'' +
'             <table class="buyout" >' +
'               <colgroup style="width: 50%"></colgroup>' +
'               <colgroup style="width: 50%"></colgroup>' +
'               <tbody>' +
'               <tr v-for="info in depth_buy" v-on:click=change_price(info.price)>' +
'                   <td class="f-left green">' +
'                       <span class="gray">{{info.price}}</span>' +
'                   </td>' +
'                   <td class="f-right">' +
'                       <span>{{info.count}}</span>' +
'                       <div class="zhuzhuang" :style="info.bg_length"></div>' +
'                   </td>' +
'               </tr>' +
'               </tbody>' +
'              </table>' +
'' +
'              <div class="group">' +
'                   <label>深度合并</label>' +
'                      <span disabled>1</span>' +
'                       <span disabled>2</span>' +
'                       <span disabled class="orange">3</span>' +
'               </div>' +
'           </div>' +
'          ' +
'          <div class="trade-forms">' +
'               <div class="order-form">' +
'                   <div class="f-left products">' +
'                       <div class="select">' +
'                           <label v-on:click="link_to_market()">' +
'                   <i class="icon icon-left" style="font-size: 0.6rem;color: #F0B90B;font-weight:bold;"></i>' +
'                           <span>{{up_coin_type}} / {{up_use_coin_type}}</span>' +
'                           </label>' +
'                       </div>' +
'                       ' +
'                  </div>' +
'                   <div class="order-form-tab">' +
'                       <p class="buttons-row">' +
'                           <span id="title_buy" class="button cur" v-on:click=click_buy()>买入</span>' +
'                           <span  id="title_sell" class="button" v-on:click=click_sell()>卖出</span>' +
'                        </p>' +
'                 </div>' +
'               <div class="order-form-con">' +
'                   <div class="buy-form">' +
'                       <form>' +
'                       <div class="filed f-clear">' +
'                           <div class="totals">' +
'                               <div>' +
'                                   <label class="">可用: </label>' +
'                               <span>{{show_balance}}  {{show_coin_type}} </span> ' +
'                               </div>' +
'                           </div>' +
'                       </div>' +
'                      <div class="filed input-group">' +
'                       <input v-model="input_price" placeholder="价格" type="text" keypress=""/>' +
'                          <span class="input-u">{{up_use_coin_type}}</span>' +
'                      </div>' +
'                      <div class="filed input-group">' +
'                          <input v-model="input_count" placeholder="数量" type="text" keypress=""/>' +
'                          <span class="input-u">{{up_coin_type}}</span>' +
'                      </div>' +
'                      <div class="filed f-clear">' +
'                           <div class="totals">' +
'                           <label>{{show_can_total_title}}:</label>' +
'                           <span class="f-fr">{{show_can_total_amount}} {{show_can_total_coin_type}}</span>' +
'                           </div>' +
'                      </div>' +
'                       <div class="filed totalsPercent">' +
'                       <span v-on:click=change_count(0.25) :class="percent_color" >25%</span>' +
'                       <span v-on:click=change_count(0.50) :class="percent_color2" >50%</span>' +
'                       <span v-on:click=change_count(0.75) :class="percent_color3" >75%</span>' +
'                       <span v-on:click=change_count(1) :class="percent_color4" >100%</span>' +
'                       </div>' +
'                       <div class="filed f-clear">' +
'                           <label>金额: </label>' +
'                           <span class="f-fr">{{total_amount}} {{up_use_coin_type}}</span>' +
'                       </div>' +
'                       <div class="filed">' +
'                           <input type="submit" id="id_button" v-on:click="submit_button()"  :value="show_button_title" class="button button-big submit-btn buy-btn">' +
'                       </div>' +
'                    </form>' +
'                   </div>' +
'                   ' +
'               </div>' +
'               </div>' +
'           </div>' +
'       </div>' +
'   </div>' +
'    ' +
'</div>'


TRADE = {
    template : trade_template,
    data: function () {
        // 初始化
        trade_data.coin_type=dict.coin_type
        trade_data.use_coin_type=dict.use_coin_type
        trade_data.up_coin_type=dict.coin_type.toUpperCase()
        trade_data.up_use_coin_type=dict.use_coin_type.toUpperCase()

        return trade_data
    },
    computed: {
        total_amount : {
            get: function () {
                return this.input_price * this.input_count
            },
            set: function (data) {
                return total_amount = data
            },
        }
    },

    created:function () {
        this.init_left('buy', this.use_coin_type)
    },

    methods:{
        link_to_market: function () {
            window.location.href = './market';
        },
        click_sell: function () {
            this.init_left('sell', this.coin_type)
        },
        click_buy: function () {
            this.init_left('buy', this.use_coin_type)
        },

        init_left: function(type1, coin_type) {
            this.get_amount(coin_type)
            this.type1 = type1
            if (type1 == "sell") {
                this.show_button_title ="卖出"
                this.show_can_total_title = "可卖"
                $("#id_button").css("backgroundColor", "#ff007a");
                $("#id_button").css("border-color", "#ff007a");
                $("#title_sell").addClass("cur");
                $("#title_buy").removeClass("cur");
            } else {
                this.show_button_title =" 买入"
                $("#id_button").css("backgroundColor", "#70a800");
                $("#id_button").css("border-color", "#70a800");
                $("#title_buy").addClass("cur");
                $("#title_sell").removeClass("cur");
                this.show_can_total_title = "可买"
            }

        },

        get_amount: function (coin_type) {
            $.post("/btc/get_amount",
            {coin_type: coin_type},
            (data) => {
                // todo tofixed
                var balance = data['amount']
                this.show_balance = balance
                this.show_coin_type =  coin_type.toUpperCase()
                if (coin_type == this.coin_type)
                {
                    this.show_can_total_amount = this.show_balance
                    this.show_can_total_title = "可卖"
                    this.show_can_total_coin_type = this.up_coin_type
                }
            })
        },

        submit_button: function () {
            //询问框
            this.type1
            if (this.type1 == 'buy')
            {
                var content = '您确定要挂单购买'
                var style = 'border:none; background-color:#fff; color:#333;border-radius:0px'
                layer.open({
                    content: content
                    ,btn: ['购买', '取消']
                    ,style:style
                    ,yes: (index) => {
                        this.submit_buy()
                    }
                });
            }
            if (this.type1 == 'sell')
            {
                var content = '您确定要挂单卖出'
                var style = 'border:none; background-color:#fff; color:#333;border-radius:0px'
                layer.open({
                    content: content
                    ,btn: ['卖出', '取消']
                    ,style:style
                    ,yes: (index) => {
                        this.submit_sell()
                    }
                });

            }
        },

        submit_buy:function () {
            //console.log("submit_buy" )
            var price = this.input_price
            var buy_count = this.input_count
            $.post("/btc/buy", {
                coin_type : this.coin_type,
                use_coin_type : this.use_coin_type,
                price : price,
                count : buy_count,
                //trade_type = this.trade_type,
                trade_type : 'limit',
            }, (data) => {

                var error_msg = {
                    "balance not enough" : "余额不足",
                    "buy amount too small" : "购买金额小于最小交易金额",
                    "msm verify false" : "短信验证码不正确",
                }

                //console.log(data);
                var content = '下单购买成功'
                if (data.result == false) {
                    var msg = data.msg
                    if (error_msg[msg])
                    {
                        msg = error_msg[msg]
                    }
                    //console.log(msg);
                    content = '下单失败,'+ msg
                }

                var style = 'border:none; background-color:#fff; color:#333;border-radius:0px'
                layer.open({
                    type:0,
                    content: content,
                    skin: 'msg',
                    time: 3 ,//2秒后自动关闭
                    style: style,
            });
        })
    },
    submit_sell:function () {
        //console.log("submit_sell" )
        var price = this.input_price
        var sell_count = this.input_count
        $.post("/btc/sell", {
            coin_type : this.coin_type,
            use_coin_type : this.use_coin_type,
            price : price,
            count : sell_count,
            //trade_type = this.trade_type,
            trade_type : 'limit',
        }, (data) => {

            var error_msg = {
                "balance not enough" : "余额不足",
                "sell too min" : "卖出数量小于最小交易数量",
                "msm verify false" : "短信验证码不正确",
            }

            //console.log(data);
            var content = '下单成功'
            if (data.result == false) {
                var msg = data.msg
                if (error_msg[msg])
                {
                    msg = error_msg[msg]
                }
                //console.log(msg);
                content = '下单失败,'+ msg
            }

            var style = 'border:none; background-color:#fff; color:#333;border-radius:0px'
            layer.open({
                type:0,
                content: content,
                skin: '3sg',
                time: 3 ,//3秒后自动关闭
                style: style,
        });
    })
},

change_price:function (price) {
    if (this.type1 == 'buy') {
        this.input_price=price;
        var total = this.show_balance / price
        total = floor_number(total, 8)

        this.total_amount = this.input_price * this.input_count

        // todo buy amount
        this.show_can_total_amount = total
        this.show_can_total_title = "可买"
        this.show_can_total_coin_type = this.up_coin_type
    }

    if (this.type1 == 'sell') {

        this.input_price = price;
        this.total_amount = this.input_price * this.input_count

        this.show_can_total_amount = this.show_balance
        this.show_can_total_title = "可卖"
        this.show_can_total_coin_type = this.up_coin_type
    }

    //console.log("change price" , price)
},

change_count:function (percent) {
    var price = this.input_price;

    this.percent_color = ""
    this.percent_color2 = ""
    this.percent_color3 = ""
    this.percent_color4 = ""

    if (percent == 0.25)
    this.percent_color = "orange"
    if (percent == 0.50)
    this.percent_color2 = "orange"
    if (percent == 0.75)
    this.percent_color3 = "orange"
    if (percent == 1)
    this.percent_color4 = "orange"

    if (price <= 0) {
        return
    }
    if (this.type1 == 'buy')
    {
        var balance = this.show_balance
        var input_count= balance * percent / price;
        input_count = floor_number(input_count, 8)
        this.input_count= input_count
        var total_amount = price * input_count
        total_amount = floor_number(total_amount, 8)
        this.total_amount = total_amount

        //        console.log("change count, input count" , input_count)
        //        console.log("change count, total_amount" , this.total_amount)
    }
    else
    {
        var balance = this.show_balance
        var input_count= balance * percent
        input_count = floor_number(input_count, 8)
        this.input_count= input_count
        var total_amount = price * input_count
        total_amount = floor_number(total_amount, 8)
        this.total_amount = total_amount

        console.log("change count, input count" , input_count)
        console.log("change count, total_amount" , this.total_amount)
    }
},
},

//props['depth_sell', 'depth_buy']
};
